<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			.one {
				width: 40px;
				height: 40px;
				border: 2px solid black;
				background-repeat: no-repeat;
				background-image: url("1.png");
				background-position: 0 -10px;
			}

			.two {
				width: 40px;
				height: 40px;
				border: 2px solid black;
				background-image: url("1.png");
				background-repeat: no-repeat;
				background-position: -65px -10px;
			}
		</style>
	</head>
	<body>

		<!-- 
			工作中拿到的一般是psd设计图, 拿到图以后进行抠图, 设计亮度等

			CSS sprites: 雪碧图或者精灵图, 把多张小图片放到一张图片里, 这样能够减少客户端与服务器之间的交互次数, 从而降低服务器端的压力

		 -->

		 <div class="one"></div>
		 <div class="two"></div>
		 <div></div>
		
	</body>
</html>